<template>
		<Row class="rowboxs">
				<Col span="24" class="tith4">
            <h3>紧急警告预警</h3>
        </Col>
        <Col span="11" v-for="(item,index) of columns" :offset="item.ofe" :class="item.cls">
            <Card>
                  <p slot="title">{{item.title}}</p>
                <router-link to="curve">
                  <p>{{item.position}}</p>
                  <p style="color:red;">{{item.miao}}</p>
                  <p><i class="yujings">{{item.degree}} </i> {{item.content}}</p>
                  <p>程度：
                      <span class="spacol">
                          <Icon type="ios-star" v-for="n in item.degree" :key="n"></Icon>
                      </span>
                  </p>
              </router-link>
            </Card>
        </Col>
    </Row>
</template>
<script>
export default {
  data () {
    return {
      columns: [
        {
          "title": "造气车间-气味超标",
          "position": "位置：1号锅炉",
          "content": "次预警",
          "degree": 4,
          "cls": "clr",
          "miao": "气味超标，检查泄露",
          "ofe": 0
        },
        {
          "title": "压力泵车间-超压",
          "position": "位置：3号压力泵",
          "content": "次预警",
          "degree": 3,
          "cls": "clr",
          "miao": "气压 < 3.0（Pa） 低气压",
          "ofe": 1
        },
        {
          "title": "废水处理-超标排放",
          "position": "数据：Vocs",
          "content": "次预警",
          "degree": 2,
          "cls": "mtop",
          "miao": "有害废弃物释放超标",
          "ofe": 0
        },
        {
          "title": "第四厂区-视频入侵",
          "position": "数据：信息监控",
          "content": "次预警",
          "degree": 1,
          "cls": "mtop",
          "miao": "视频入侵,系统异常",
          "ofe": 1
        }
      ]
    };
  }
};
</script>
<style scoped>
  .rowboxs{
    padding: 20px;
    padding-top: 5px;
  }
  .rowboxs a{
    color: #333;
  }
  .tith4{
    line-height: 35px;
    color: red;
  }
  .yujings{
    color: red;
    font-size: 14px;
    font-weight: bold;
  }
	.mtop{
		margin-top: 20px;
	}
  .spacol{
    color: #FFAC2D;
  }
  .clr .spacol{
    color: red; 
  }
</style>